<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <style>
    html,
    body,
    #container {
      width: 100%;
      height: 100%;
      margin: 0;
    }
    </style>
    <title>GeoJSON</title>
    <link rel="stylesheet" href="//a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
    <script src="https://webapi.amap.com/maps?v=2.0&key=eefc61f57e92d0d03c2088b69b59652c&plugin=AMap.GeoJSON"></script>
    <script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script>
</head>
<body>
<div id="container"></div>
<script type="text/javascript">
    var map = new AMap.Map('container', {
        //  pitch: 50, //地图俯仰角度，有效范围 0 度- 83 度
    //   viewMode: "3D",
      center: [121.395777, 29.004873],
      rotateEnable: true, //是否开启地图旋转交互 鼠标右键 + 鼠标画圈移动 或 键盘Ctrl + 鼠标左键画圈移动
      pitchEnable: true, //是否开启地图倾斜交互 鼠标右键 + 鼠标上下移动或键盘Ctrl + 鼠标左键上下移动
      zoom: 11, //初始化地图层级
    //   rotation: -15, //初始地图顺时针旋转的角度
    //   zooms: [2, 20], //地图显示的缩放级别范围
      layers: [new AMap.TileLayer.Satellite()]
    });
    
    ajax('https://geo.datav.aliyun.com/areas_v3/bound/331022.json', function(err, geoJSON) {
        if (!err) {
            var geojson = new AMap.GeoJSON({
                geoJSON: geoJSON,
                // 还可以自定义getMarker和getPolyline
                getPolygon: function(geojson, lnglats) {
                    // 计算面积
                    var area = AMap.GeometryUtil.ringArea(lnglats[0])
                    return new AMap.Polygon({
                        path: lnglats,
                        fillOpacity: 0.2,// 面积越大透明度越高
                        strokeColor: 'white',
                        // fillColor: "#3D6BB1",
                    });
                }
            });
            map.add(geojson);
            log.success('GeoJSON 数据加载完成')
        } else {
            log.error('GeoJSON 服务请求失败')
         }
    })
</script>

</body>
</html>